<template>
    <ContentBase>
        <div class="content-top">
            <span style="font-size: 150%;">通知公告</span>
            <button type="button" class="btn btn-outline-primary float-end" @click="clickJump">
                发布通知
            </button>
        </div>
        <div>
            <table class="table table-hover" style="text-align: center; vertical-align: middle;">
                <thead>
                    <tr>
                        <th>标题</th>
                        <th>发布日期</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="record in records" :key="record.id">
                        <td>{{ record.title }}</td>
                        <td>{{ record.createtime }}</td>
                        <td>
                            <button type="button" class="btn btn-outline-secondary" @click="clickToUpdate(record)">修改</button>
                            <button type="button" class="btn btn-outline-danger" 
                                style="margin-left: 10px;" 
                                data-bs-toggle="modal" data-bs-target="#deleteEvent"
                            >删除</button>

                            <div class="modal fade" id="deleteEvent" tabindex="-1">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h1 class="modal-title fs-5" id="exampleModalLabel">提示</h1>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div style="font-size: 18px; color: red;">是否删除这条记录</div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                                            <button type="button" class="btn btn-primary" data-bs-dismiss="modal" @click="clickToDelete(record)">确定</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <nav aria-label="...">
                <ul class="pagination" style="float: right;">
                    <li class="page-item" @click="click_page(-2)">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li :class="'page-item ' + page.is_active" v-for="page in pages" :key="page.number" @click="click_page(page.number)">
                        <a class="page-link" href="#">{{ page.number }}</a>
                    </li>
                    <li class="page-item" @click="click_page(-1)">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </ContentBase>
</template>

<script setup>
import ContentBase from '../components/ContentBase';
import $ from 'jquery';
import { useStore } from 'vuex';
import router from '@/router/index';
import { ref } from 'vue';

const store = useStore();
let records = ref([]);
let current_page = 1;
let total_records = 0;
let pages = ref([]);

const clickJump = () => {
    router.push({name: "EventsEditor"});
}
const clickToUpdate = (record) => {
    router.push({
        name: "EventsUpdate",
        params: {
            id: record.id
        },
    })
}
const clickToDelete = (record) => {
    $.ajax({
        url: "http://localhost:3000/api/dormaddmin/delete-event",
        type: "POST",
        data: {
            id: record.id,
        },
        headers: {
            Authorization: "Bearer " + store.state.user.token,
        },
        success(resp) {
            if (resp.error_message == "success") {
                pull_page(current_page);
            } else {
                console.log(resp.error_message);
            }
        },
        error(resp) {
            console.log(resp);
        }
    })
}

const click_page = page => {
    if (page === -2) page = current_page - 1;
    else if (page === -1) page = current_page + 1;
    
    let max_pages = parseInt(Math.ceil(total_records / 10))
    if (page >= 1 && page <= max_pages) {
        pull_page(page);
    }
}

const update_pages = () => {
    let max_pages = parseInt(Math.ceil(total_records / 10))
    let new_pages = [];
    for (let i = current_page - 2; i <= current_page + 2; i ++) {
        if (i >= 1 && i <= max_pages) {
            new_pages.push({
                number: i,
                is_active: i === current_page ? "active" : "",
            });
        }
    }
    pages.value = new_pages;
}

const pull_page = page => {
    current_page = page;
    $.ajax({
        url: "http://localhost:3000/api/dormaddmin/get-event",
        type: "get",
        data: {
            page,
        },
        headers: {
            Authorization: "Bearer " + store.state.user.token,
        },
        success(resp) {
            records.value = resp.records;
            total_records = resp.records_count;
            update_pages();
            store.commit("updateRecords", resp.records);
        },
        error(resp) {
            console.log(resp);
        }
    })
}
pull_page(current_page);

</script>

<style scoped>

.content-top {
    margin-bottom: 30px;
}

</style>